重复径向渐变 repeating-radial-gradient

1
2
3
4
5
.dot-list {
height: .24rem;
background: radial-gradient(circle closest-side, red, red .12rem, transparent .12rem, transparent .20rem) repeat;
background-size: .30rem .24rem;
}

问题:

  1. 圆形有锯齿
  2. 宽度无法保证不截断最后一个圆

https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeating-radial-gradient

坚持原创技术分享,您的支持将鼓励我继续创作!